PWA Night vol.7 ～PWAのミライや活用方法をみんなで考えよう～
https://gyazo.com/d83c4beda40fd04c8c35363246ed737f
神野真彦
トップページ（スマートフォンWeb）
取り組みについて
ホーム画面追加を行った
Add to HomeScreen（A2H）
実装方法
Web App Manifest
manifest.jsonを用意する
linkタグで読み込み
webページと同一ドメインで配信する必要あり
192×192のアイコンが必須
確認
Chrome検証
Application > Manifestを開く
ServiceWorker.js
オフライン対応が必須
fetchのイベントリスナを実装したらオフライン対応（とみなす）
self.addeventlistener("fetch", e =>());
動作確認
mini-infobarが表示される
A2HSダイアログの表示
追加ボタンをすると追加される
苦労した点
対応ブラウザ
OSやブラウザの実装に大きく依存する
戻る・進む・外部リンククリックの挙動
iOSの対応は見送ってる
戻るができない
iOS12.xよりエッジスワイプでできるようになった
別ドメインのリンクをタップするとSafariが起動
iOS12,xより自アプリ内で開く
Safariでログインしてても追加されたPWAでは非ログインになる ブラウザバージョンアップ
ホーム画面追加などの新技術は色々と仕様変更が多い
ログインしていないと正常なホーム画面追加ができない
追加したアプリケーションが認識されない状態
ドロワーに出てこない
所感
メリット
Webアプリケーションのよいところを活かせる
ネイティブにちかいUXを実現
デメリット
ブラウザへの依存度が高くなるので注意がいる
使用が頻繁に変わるので追従していく必要あり
既存のアプリをPWA化する注意
ホーム画面追加したときに動作に問題ないか？
アドレスバーなくなることを制限される、タブUIがなくなることへの影響
現行のUXを損なわないのか
差異をどこまで許容するか？
どのブラウザを対象とするか
非対象ブラウザをどう扱うか？
森下泰光
Webメディア「いこーよ」
いこレポ
2017年7月サービス開始
PVも伸ばしてるが、トラフィックは検索流入
新規ユーザがおおい
リピーターを増やすためにA2HSを導入してみよう
fetchイベントハンドラ
キャッシュがあればそれを返して通信はしないようにする
Fetch API
キャッシュを実装すればおのずと対応できそう
自前で実装は大変だった
キャッシュ戦略を考えると大変
実装するからにはちゃんとしたいがキャッシュ自体が目的ではない
Workbox
Google製のServiceWorkerサポートライブラリ
webpackプラグインもある
管理画面でのJS, CSS
ユーザ向けページで使うJS,CSSのみ
静的アセットは基本プリキャッシュ
PC向けアセット、管理画面はキャッシュしたくない
記事画像はランタイムキャッシュでキャッシュしたい
runtimeCachingの設定
workbox-webpack-plugin
プリキャッシュはprecache-manifest.****.jsに記載される
1. modifyUrlPrefixでCDNからプリキャッシュファイルを取る 2. excludeの設定
4. ランタイムキャッシュも設定（URLの正規表現でパターン判定） ブラウザが使える容量を超えたら削除
A2HSの話
デフォルトではわかりづらい
ポップアップモーダルに変更した
ボタンクリックでプロンプト表示
beforeinstallpromptイベントで実装できる
問題
キャンセルしてもイベントが発火する
Cookieを使って一定期間表示させないようにした
課題
効果測定したい
Google Analyticsにイベントを送る
各イベントにgaタグ挿入
登録率 0.25%
2016年6月創業のゲーム会社
2018年4月 PWAゲームをリリース
永続化するための要素技術
モバイルSafariは50MBが限界
Persistent Storage
上記で保存したものを永続化させるための手段
通信量を抑えたサービスを提供できる
navigator.storage.persisted()
navigator.storage.persist()
ストレージ永続化仕様
対象サイトがブックマークされていること
数は5以下
高いサイトエンゲージメント
chrome://site-engagement/で確認できる
Origin
Base
Bonus
現在は謎の値
今は0
Total
どれだけ字間を割いてサイトを見てるかを定量化する
しかし「高い」の具体的な数値は入ってない
ホームスクリーン追加されている
push通知を許可されていること
試してみる
high site engagementの挙動を確認
3点が☓
1点が○
ブックマークを試す
2つ試して5個以内なのに片方だけだめだった
公開されていない仕様があると考えるのが自然
隠された仕様を追ってみる
DurableStoragePermissonContext::DecidePermission
GetImportantRegisterableDomains()
引数に10が入ってる
reason_bitfieldはドメインリストが10件以上あると上位10件を選ぶ
計算方法
サイトエンゲージメントが高い: 1
常に永続化の許可: 2
ブックマーク条件: 4
ホームスクリーンの追加: 8
push通知の許可: 16
サイトエンゲージメントの閾値
EngagementLevel::MEDIUM
15点
ホームスクリーン追加の詳細条件
installed_bonusの値で決定
0より大きいとホームスクリーンに追加されてると判定
最後に起動して10日以内ならinstalled_bonusは5点になる
ブックマークに追加の詳細条件
ブックマーク数を5件以下にしなくてもサイトエンゲージメントスコアが高ければブックマーク条件を満たす
Tomoya Ishizaka
@angular/cdk
dndも簡単に導入できる
@angular/pwa, @angular/service-worker, がある
ng add @angular/pwaでmanifest生成
@angular/service-workerはSWUpdate
簡単には届かなかったWeb Push
Web pushとは
ブラウザ向けの通知
pushの方法は複数ある
ドキュメントが中級者向け
プロトコルやFirebaseの使い方をしっている必要ある
古い仕様や規格の情報がある
push severとは？
ブラウザベンダなどが管理している配信用のサーバー
Firebaseは通知機能のFCMを提供している
何が必須になるか
どのpush serviceを用意するかで道具が変わる
3rd partyのpush server
自前のpush server